<template>
  <div class="flex flex-col h-full">
    <vxe-card title="" class="w-full" :border="false">
      <AuForm ref="formRef" :formList="formList" @submit="search" />
    </vxe-card>

    <div class="flex-grow overflow-hidden mt-4">
      <AuTable ref="tableRef" v-bind="gridOption" @actionClick="actionClick" />
    </div>

    <TypeEditModal
      v-model="showTagModal"
      :form-data="rowData"
      @confirm="tableRef?.refresh()"
    />
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, reactive, ref } from "vue";
import { AuTable } from "@/components/AuTable";
import { AuForm } from "@/components/AuForm";
import {
  ACTION_TYPE,
  ObjectProps,
  PropDefines
} from "@/components/AuTable/type";
import { ElMessage } from "element-plus";
import {
  getMaterialTypeList,
  materialTypeDel,
  MaterialTypeProp
} from "@/api/cabinet/material";
import TypeEditModal from "./components/TypeEditModal.vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

defineOptions({
  name: "CabinetCategoryManage"
});

// region 声明ref变量集合
const { proxy } = getCurrentInstance();
const formList = ref([
  {
    type: "input",
    label: "material.type.name",
    key: "name",
    placeholder: "material.type.name_placeholder"
  }
]);
const gridOption = reactive<PropDefines>({
  isServerPage: true,
  showCheckbox: true,
  columns: [
    { field: "id", title: "material.type.id" },
    { field: "name", title: "material.type.name" },
    {
      field: "note",
      title: "table.note"
    },
    { field: "create_time", title: "material.type.create_time" }
  ],
  actions: [ACTION_TYPE.EDIT, ACTION_TYPE.TDELETE, ACTION_TYPE.TADD],
  operateTools: [],
  dataSource: [],
  fetchConfig: {
    query: {
      service: (params: ObjectProps) => {
        return getMaterialTypeList(params);
      },
      param: () => formRef.value.getFormData()
    }
  }
});

const showTagModal = ref(false);
const rowData = ref(null);

const formRef = ref();
const tableRef = ref();
// endregion

// region 公共方法的集合

// endregion

// region 组件事件的集合
const search = () => {
  tableRef.value.refresh();
};

type ActionType = {
  key: ACTION_TYPE;
  row: MaterialTypeProp;
};
const actionClick = ({ key, row }: ActionType) => {
  console.log(key, row);
  switch (key) {
    case ACTION_TYPE.EDIT:
      rowData.value = {
        id: row.id,
        name: row.name,
        note: row.note
      };
      showTagModal.value = true;
      break;
    case ACTION_TYPE.TADD:
      rowData.value = null;
      showTagModal.value = true;
      break;
    case ACTION_TYPE.TDELETE:
      proxy.$auMessageBox
        .confirm(t("material.type.delete_confirm"), t("notice.title"), {
          type: "error"
        })
        .then(() => {
          const checkedNodes = tableRef.value.getCheckboxRecords();
          console.log(checkedNodes);
          if (checkedNodes.length > 0) {
            materialTypeDel({
              materialTypeList: JSON.stringify(checkedNodes)
            }).then(res => {
              if (res.code === 200) {
                ElMessage({
                  message: t("notice.operation_success"),
                  type: "success"
                });
                tableRef.value.refresh();
              }
            });
          }
        })
        .catch(() => {});
    default:
      break;
  }
};
// endregion
</script>
